import React from 'react'
import { Toast } from 'antd-mobile'
import './index.scss'
import { getCurrentCity } from '@/utils/index.js'
import { List, AutoSizer } from 'react-virtualized'
import NavHeader from '@/components/NavHeader'
import { getCityListApi, getAreaHotApi } from '@/api/area'
// 组件自带的渲染家列表的代码
// const list = Array(100).fill('react-virtualized')
// function rowRenderer ({
//   key, // Unique key within array of rows
//   index, // 索引号
//   isScrolling, // 当前项是否正在滚动中
//   isVisible, // 当前项在 List 中是可见的，是否在可视区展示
//   style // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
// }) {
//   return (
//     <div key={key} style={style}>
//       1232 -{list[index]} {index} {isScrolling + ''}
//     </div>
//   )
// }

// 索引（A、B等）的高度 定义高度，实现动态的获取
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50

// 有房源的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']

// 格式化返回的城市列表数据
const formatCityData = list => {
  // console.log(list);
  const cityList = {}
  list.forEach(item => {
    const first = item.short.substring(0, 1)
    if (cityList[first]) {
      cityList[first].push(item)
    } else {
      cityList[first] = [item]
    }
  })
  const cityIndex = Object.keys(cityList).sort()
  return {
    cityList,
    cityIndex
  }
}

// 格式化城市名称
// 封装处理字母索引的方法
const formatCityIndex = letter => {
  switch (letter) {
    case '#':
      return '当前定位'
    case 'hot':
      return '热门城市'
    default:
      return letter.toUpperCase()
  }
}

export default class CityList extends React.Component {
  constructor () {
    super()
    this.state = {
      cityList: {},
      cityIndex: [],
      activeIndex: 0
    }
    this.cityListComponent = React.createRef()
  }

  async componentDidMount () {
    await this.getCityList()
    // 必须等整个索引列表渲染好以后，这个方法才有效果
    // 这个方法会校验每一行的高度，从而实现点击的精度准确
    this.cityListComponent.current.measureAllRows()
  }
  // 获取城市信息
  async getCityList () {
    const { data: res } = await getCityListApi(1)
    // console.log('获取城市信息', res)
    const { cityList, cityIndex } = formatCityData(res.body)
    // console.log(cityList)
    // console.log(cityIndex)
    // 获取热门城市信息
    const { data: hotres } = await getAreaHotApi()
    cityList['hot'] = hotres.body
    cityIndex.unshift('hot')
    const curCity = await getCurrentCity()
    // 返回结果
    // console.log(curCity)
    cityList['#'] = [curCity]
    cityIndex.unshift('#')
    console.log('cityList', cityList)
    console.log('cityIndex', cityIndex)
    this.setState({
      cityList,
      cityIndex
    })
  }
  // 渲染列表
  rowRenderer = ({
    key, // Unique key within array of rows
    index, // 索引号
    isScrolling, // 当前项是否正在滚动中
    isVisible, // 当前项在 List 中是可见的，是否在可视区展示
    style // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
  }) => {
    const { cityList, cityIndex } = this.state
    // 根据索引号获取到对应的索引值
    const letter = cityIndex[index]
    return (
      <div key={key} style={style} className='city'>
        <div className='title'>{formatCityIndex(letter)}</div>
        {cityList[letter].map(item => (
          <div
            className='name'
            key={item.value}
            onClick={() => this.changeCity(item)}
          >
            {item.label}
          </div>
        ))}
      </div>
    )
  }

  // 点击切换城市
  changeCity = ({ label, value }) => {
    // console.log('222', label)
    // console.log('222', value)
    if (HOUSE_CITY.indexOf(label) > -1) {
      // 如果有房源数据
      localStorage.setItem('hkzf_city', JSON.stringify({ label, value }))
      this.props.history.go(-1)
    } else {
      // 没有房源数据
      Toast.fail('该城市暂无房源数据', 1, null, false)
    }
  }

  // 计算高度,这个高度是整个的a:[{北京},{上海}]数组的高度
  // 或者说是这一个组的整体高度，他并不是具体的每一行的城市列表的高度
  getRowHeight = ({ index }) => {
    // 索引标题高度 + 城市数量 * 城市名称的高度
    const { cityList, cityIndex } = this.state
    return TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
  }

  // 实现右侧索引
  renderRightList = () => {
    const { cityIndex, activeIndex } = this.state
    return cityIndex.map((item, index) => (
      <li
        className='city-index-item'
        key={index}
        onClick={() => {
          // console.log(index)
          this.cityListComponent.current.scrollToRow(index)
        }}
      >
        <span className={activeIndex === index ? 'index-active' : ''}>
          {item === 'hot' ? '热' : item.toUpperCase()}
        </span>
      </li>
    ))
  }

  // 获取当前列表的起始位置，获取list列表航的信息
  onRowsRendered = ({ startIndex }) => {
    // console.log(startIndex)
    if (this.state.activeIndex !== startIndex) {
      this.setState({
        activeIndex: startIndex
      })
    }
  }

  render () {
    return (
      <div className='citylist'>
        <NavHeader
          onLeftClick={() => {
            // console.log('测试函数')
            this.props.history.go(-1)
          }}
        >
          城市的选择
        </NavHeader>
        <AutoSizer>
          {({ height, width }) => (
            <List
              scrollToAlignment='start'
              ref={this.cityListComponent}
              width={width}
              height={height}
              rowCount={this.state.cityIndex.length}
              rowHeight={this.getRowHeight}
              rowRenderer={this.rowRenderer}
              onRowsRendered={this.onRowsRendered}
            />
          )}
        </AutoSizer>
        <ul className='city-index'>{this.renderRightList()}</ul>
      </div>
    )
  }
}
